
<template>
  <div>

     <!-- 头部 -->
     <router-link to="/">
       <van-nav-bar title="行程卡" left-arrow fixed class="van-nav-bar"/>
    </router-link>

    <div class="my-tc" style="height:92vh;">
      <div class="my-tc-inner" style="height:70vh;">
        <!-- <h3>这是TravelCode(行程码)界面</h3> -->
        <h3 class="tc-user">{{phone}} 的动态行程卡</h3>
        <h3 class="tc-time">更新于：</h3>

        <h3 class="tc-time1">{{ nowYear }}.{{ nowMouth }}.{{ nowDate }} {{ nowHour }}.{{ nowMinute }}.{{ nowSecond }}</h3>

        <div :style="{height:h}" class="tc-img">
        <img src="http://www.zlllcy.com/img/icon/trip.png" alt="">
        </div>

        <div>
        <p  class="tc-zhu-p1">您于前14天内到达或途径：<b>{{province}}</b></p>
        <p class="tc-zhu-p2"><b>*(注:*表示当前该城市存在中风险或高风险地区，并不表示用户实际到访过这些中高风险地区。)</b></p>
        </div>
      </div>
    </div>
    

    

    <!-- 底部选项卡 -->
   <!-- <my-tabbar></my-tabbar> -->
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: "",
      nowYear: "",
      nowMouth: "",
      nowDate: "",
      nowWeek:"",
      nowHour:"",
      nowMinute:"",
      nowSecond:"",
      h:"0px",
      phone:'',
      province:''
    };
  },
  // watch: {
  //   selected(newVal) {
  //     if (newVal == "page") {
  //       this.$router.push("/");
  //     } else if (newVal == "service") {
  //       this.$router.push("/service");
  //     } else if (newVal == "consult") {
  //       this.$router.push("/consult");
  //     } else if (newVal == "me") {
  //       this.$router.push("/mypage");
  //     }
  //   },
  // },
  mounted(){
    this.getdate();
    this.createcode();
    // 动态生成高度
    let picw = 1280;
    let pich = 640;
    let imgw = window.screen.width; // 屏幕宽度
    let imgh = (imgw * pich) / picw + "px";
    this.h = imgh;
  },
  methods: {
    getdate() {
      const year = new Date().getFullYear();
      const mounth =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      const date =
        new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate();
      const week = new Date().getDay();
      const hours = new Date().getHours() < 10 ? "0" + new Date().getHours() : new Date().getHours();
      const minutes = new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes();
      const seconds = new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds();
      if (week === 1) {
        this.nowWeek = "星期一";
      } else if (week === 2) {
        this.nowWeek = "星期二";
      } else if (week === 3) {
        this.nowWeek = "星期三";
      } else if (week === 4) {
        this.nowWeek = "星期四";
      } else if (week === 5) {
        this.nowWeek = "星期五";
      } else if (week === 6) {
        this.nowWeek = "星期六";
      } else if (week === 27) {
        this.nowWeek = "星期日";
      }
      this.nowYear = year;
      this.nowMouth = mounth;
      this.nowDate = date;
      this.nowHour = hours;
      this.nowMinute = minutes;
      this.nowSecond = seconds;
    },
    // 动态生成用户的手机号码
    createcode(){
      var phone = this.$store.state.phone;
      this.phone = phone;
      var province = this.$store.state.province;
      this.province = province;
    }
  },
  

};
</script>

<style scoped>

.my-tc{
  background-color: #34ac6f;
  border-radius: 5px;
}
.my-tc-inner{
  width: 86%;
  position: relative;
  top: 15%;
  left: 7%;
  background-color: white;
  border-radius: 5%;
  z-index: 10;
}
.my-tc-inner h3 {
  margin-bottom: 5%;
}

.tc-user{
  position: absolute;
  top: 3%;
  left: 6%;
  font-size: 18px;
  color: #243949;
}

.tc-time{
  position: absolute;
  top: 12%;
  left: 5%;
  font-size: 16px;
  color: #646566;
  
}

.tc-time1{
  position: absolute;
  top: 19%;
  left: 22%;
  text-align: center;
  font-size: 18px;
  color: #646566;
}
.tc-img{
  position: relative;
  text-align: center;
}
.tc-img img{
  position: absolute;
  top: 70%;
  left: 25%;
  width: 50%;
  animation: dh 1.8s infinite linear;
}
@keyframes dh {
  0%{transform: scale(1);}
  50%{transform: scale(1.2);}
  100%{transform: scale(1);}
}
.tc-zhu-p1{
  position: absolute;
  bottom: 30%;
  font-size: 16px;
  padding-left: 12px;
  color: #517fa4;
}
.tc-zhu-p1 b {
  font-size: 18px;
  padding-right: 12px;
  color: #646566;
}
.tc-zhu-p2 {
  position: absolute;
  top: 78%;
  font-size: 16px;
  padding-left: 12px;
  padding-right: 12px;
}
</style>



